<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstrap-select 本地示例 </title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet"> 
    <!-- Bootstrap-select -->
    <link href=.../../statics/plugins/bootstrap-select-1.12.3/css/bootstrap-select.min.css" rel="stylesheet"> 
	
	<!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet"> 
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
         
        <!-- page content -->
        <div class="framebody" role="main" >
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>bootstrap-select 本地示例</h3>
              </div>
 
            </div>
            <div class="clearfix"></div>

            <div class="row">

              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_content">
                  	<form class="form-horizontal form-label-left">
                  		<div class="item form-group">
	                        <label class="control-label col-md-1" for="name">标准样式：</label>
	                        <div class="col-md-2">
	                        	<select id="selStd" class="selectpicker">
								  <option value='1'>Mustard</option>
								  <option value='2'>Ketchup</option>
								  <option value='3'>Relish</option>
								</select>
	                        </div>
	                        <div class="col-md-3">
	                        	<a id="btnStd1" class="btn btn-primary btn-sm">获取选中的值</a>
	                        	<a id="btnStd2" class="btn btn-primary btn-sm">获取选中的文本</a>
	                        	<a id="btnStd3" class="btn btn-primary btn-sm">设置默认值</a>
	                        </div>
	                     </div>
	                     
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">多选：</label>
	                        <div class="col-md-2">
	                        	<select id="selMulti" class="selectpicker" multiple data-actions-box="true">
								  <option value='1'>Mustard</option>
								  <option value='2'>Ketchup</option>
								  <option value='3'>Relish</option>
								</select>
	                        </div>
	                        <div class="col-md-3">
	                        	<a id="btnMulti1" class="btn btn-primary btn-sm">获取选中的值</a>
	                        	<a id="btnMulti2" class="btn btn-primary btn-sm">获取选中的文本</a>
	                        	<a id="btnMulti3" class="btn btn-primary btn-sm">设置默认值</a>
	                        </div>
	                     </div>
	                     
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">默认提示：</label>
	                        <div class="col-md-6">
	                        	<select class="selectpicker" title="请选择(此处设置提示)">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                     </div>
	                     
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">实时检索：</label>
	                        <div class="col-md-6">
	                        	<select class="selectpicker" data-live-search="true">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                     </div>
	                     
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">禁用/启用：</label>
	                        <div class="col-md-2">
	                        	<select id="ex-disable" class="selectpicker" disabled>
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                        <div class="col-md-2">
	                        	<a id="btnDisableSel" class="btn btn-default btn-sm">Disable</a>
	                        	<a id="btnEnableSel" class="btn btn-default btn-sm">Enable</a>
	                        </div>
	                     </div>
	                     
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">url加载数据：</label>
	                        <div class="col-md-2">
	                        	<select id="selRemote" class="selectpicker"></select>
	                        </div>
	                        <div class="col-md-2">
	                        	<a id="btnGetRemoteData" class="btn btn-primary btn-sm">请求数据</a>
	                        </div>
	                     </div>
	                     
	                     <br/>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">宽度设置</label>
	                     </div>
	                     <div class="ln_solid"></div>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">width: 'auto'：</label>
	                        <div class="col-md-10">
	                        	<select class="selectpicker" data-width="auto">
								  <option>Mustard AAAA</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div> 
	                     </div>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">width: 'fit'：</label>
	                        <div class="col-md-11">
	                        	<select class="selectpicker" data-width="fit">
								  <option>Mustard TTTTTT</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div> 
	                     </div>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">width: '250px'：</label>
	                        <div class="col-md-11">
	                        	<select class="selectpicker" data-width="250px">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div> 
	                     </div>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">width: '75%'：</label>
	                        <div class="col-md-11">
	                        	<select class="selectpicker" data-width="75%">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div> 
	                     </div>
	                     <div class="ln_solid"></div>
	                     
	                     <br/>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">事件</label>
	                     </div>
	                     <div class="ln_solid"></div>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">change事件：</label>
	                        <div class="col-md-10">
	                        	<select class="selectpicker" id="selChangeEvent">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div> 
	                     </div>
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">hidden事件：</label>
	                        <div class="col-md-11">
	                        	<select class="selectpicker" id="selSelectEvent">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div> 
	                     </div>
	                     <div class="ln_solid"></div>
	                     <br/>
	                     
	                     <div class="item form-group">
	                        <label class="control-label col-md-1" for="name">bootstrap样式：</label>
	                        <div class="col-md-2">
	                        	<select class="selectpicker" data-style="btn-primary">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                        <div class="col-md-2">
	                        	<select class="selectpicker" data-style="btn-info">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                        <div class="col-md-2">
	                        	<select class="selectpicker" data-style="btn-success">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                        <div class="col-md-2">
	                        	<select class="selectpicker" data-style="btn-warning">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                        <div class="col-md-2">
	                        	<select class="selectpicker" data-style="btn-danger">
								  <option>Mustard</option>
								  <option>Ketchup</option>
								  <option>Relish</option>
								</select>
	                        </div>
	                     </div>
	                     
                  	</form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>    
    <!-- Bootstrap-select -->
    <script src=.../../statics/plugins/bootstrap-select-1.12.3/js/bootstrap-select.min.js"></script>
    <script src=.../../statics/plugins/bootstrap-select-1.12.3/js/i18n/defaults-zh_CN.min.js"></script>
    
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>
	
	<script>
		$('#btnStd1').on('click', function(){
			var selectValue = $('#selStd').selectpicker('val');
			alert(selectValue);
		})
		$('#btnStd2').on('click', function(){
			var selectText = $('#selStd').find("option:selected").text();
			alert(selectText)
		})
		$('#btnStd3').on('click', function(){
			$('#selStd').selectpicker('val', '2');
		})
		
		$('#btnMulti1').on('click', function(){
			var selectValue = $('#selMulti').selectpicker('val');
			alert(selectValue);
		})
		$('#btnMulti2').on('click', function(){
			//官方没有提供获取方法，根据dom结构用jquery获取
			var selectText = $('#selMulti').parent().children('button').attr('title');
			alert(selectText)
		})
		$('#btnMulti3').on('click', function(){
			$('#selMulti').selectpicker('val', ['1','3']);
		})
		
		$('#btnDisableSel').on('click', function(){
			$('#ex-disable').prop('disabled', true).selectpicker('refresh');
		})
		
		$('#btnEnableSel').on('click', function(){
			$('#ex-disable').prop('disabled', false).selectpicker('refresh');
		})
		
		$('#btnGetRemoteData').on('click', function(){
			sys.selectpicker({
				id:'selRemote',  //select的id
				url: '',  //请求数据的远程地址
				param: {}, //过滤参数
				//defaultValue: '1', //默认值
				valueField: 'id',
				textField: 'text',
				width: '200px'
			});
		})
		
		$('#selChangeEvent').on('changed.bs.select', function (e) {
		  	alert($(this).selectpicker('val'))
		});
		
		$('#selSelectEvent').on('hidden.bs.select', function (e) {
		  	alert($(this).selectpicker('val'))
		});
	
	</script>
  </body>
</html>